<div id="subHeader">
	<div class="container-fluid">
		<div class="col-md-2">
			<p class="img-container md"><img src="{{group.image}}" /></p>
		</div>
		<div id="groupName" class="col-md-10">
			<h2>{{group.name}}</h2>
		</div>
	</div>
</div>
  	
<div class="container-fluid">
	<div id="group">
		<div class="row">
			<div class="col-md-4 text-left">
				<i class="fa fa-group green"></i> <h2 style="display: inline-block;">Integrantes</h2>
			</div>
			<div class="col-md-4 text-right">
				<p style="margin-top: 2rem; margin-bottom: 1rem;" ><a href="#">Bajarme de esta lista</a></p>
			</div>
			<div class="col-md-4">
				<div id="inviteButton" class="button button-green full text-center" data-toggle="modal" data-target="#newUserGroupModal">
					<div><span class="glyphicon glyphicon-bullhorn darkYellow"></span> invitar jugadores</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-8">
				<div class="row">
					<div ng-repeat="user in group.users" class="col-md-6">
						<div class="player-item">
							<div class="col-md-4 img-container sm"><img src="{{user.photo_url}}" /></div>
							<div class="col-md-8">{{user.name}} {{user.lastname}}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-4">
				<div class="row no-bottom-margin">
					<div class="col-md-12">
						<div class="bordered no-bottom">
							<div class="bordered-item-button" data-toggle="modal" data-target="#groupImageModal"><i><a href="#" onclick="return false;"><i class="fa fa-pencil gray"></i></span></a></i></div>
							<p class="text-center img-container md"><img src="{{group.image}}" /></p>
							<h3>{{group.name}}</h3>
							<p class="text-center">{{ group.users == undefined ? 0 : group.users.length }} jugadores</p>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-12">
						<div class="bordered">
							<div class="row">
								<div class="col-md-6">
									<p>Administrador:</p>
								</div>
								<div class="col-md-6">
									<p class="text-right"><strong>{{group.admin.name}} {{group.admin.lastname}}</strong></p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

	<div id="groupImageModal" class="modal fade" flow-init flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]" flow-files-submitted="$flow.upload()" flow-file-success="fileAdded($flow.files[0])" >
  		<div class="modal-dialog modal-dialog-center">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<h2 class="darkGray no-margin">Agregale una imagen a tu equipo</h2>
					<div class="thumbnail" ng-hide="$flow.files.length">
				    	<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
				    </div>
				    <div class="thumbnail" ng-show="$flow.files.length">
				      	<img flow-img="$flow.files[0]" />
				    </div>
				    <div>
				      	<span class="btn" ng-hide="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Select image</span>
				      	<span class="btn" ng-show="$flow.files.length" flow-btn flow-attrs="{accept:'image/*'}">Change</span>
				      	<span class="btn btn-danger" ng-show="$flow.files.length"
				         	ng-click="$flow.cancel();resetImage();">
				        	Remove
				      	</span>
				    </div>
				    <p>
				      Only PNG,GIF,JPG files allowed.
				    </p>
					<div id="newImageButton" class="button button-green medium" ng-click="saveImage()">
						<div><span class="glyphicon glyphicon-ok darkYellow"></span> guardar</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

	<div id="newUserGroupModal" class="modal fade">
  		<div class="modal-dialog modal-dialog-center h630">
    		<div class="modal-content">
      			<div class="modal-header">
        			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
      			</div>
      			<div class="modal-body">
        			<div class="row no-bottom-margin no-side-margin">
        				<div class="col-md-12">
		        			<h2 class="darkGray no-margin">Agregá amigos al grupo <font class="green">{{ group.name }}</font></h2>
							<h4 class="darkGray">Juntá a los de siempre, a tu equipo, los del laburo, o quien quieras.</h4>
							<p style="margin: 2.1rem auto; width: 38rem;">
								<input id="newGroupName" type="text" class="form-control" placeholder="Buscá por nombre" required ng-model="findPlayersQuery" />
							</p>
						</div>
					</div>
					<div class="row friends-list no-side-margin">
						<div class="row no-side-margin">
        					<div class="col-md-12"><h4 class="darkGray text-left">Mis amigos de Facebook</h4></div>
							<div ng-repeat="friend in friends | filter:findPlayersQuery" class="col-md-4" ng-click="selectFriend(friend)">
								<div class="friend" ng-class="{'selected' : isSelected(friend)}">
									<div class="photo img-container sm"><img src="https://graph.facebook.com/{{ friend.id }}/picture" /></div>
		        					<div class="name">{{ friend.name }}</div>
								</div>
	        				</div>
        				</div>
					</div>	
					<div class="row no-side-margin">
        				<div class="col-md-6 text-left">
							<h4 class="darkGray">Seleccionaste <font class="green">{{ friendsSelected.length }}</font> amigos</h4>
						</div>
        				<div class="col-md-6">
		        			<div id="newGroupButton" class="button button-green medium" ng-click="addUsers()">
								<div><span class="glyphicon glyphicon-plus darkYellow"></span> agregar</div>
							</div>
						</div>
					</div>
      			</div>
    		</div><!-- /.modal-content -->
  		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
